<template>
  <div>
      <!-- 顶部操作 -->
      <div class="tableHead">
        <div>
          <el-button size="small" type="warning" @click="batchOpen" :disabled="batchDeleteArr.length === 0">
            <i class="el-icon-delete">
              批量解封
            </i>
          </el-button>
          <el-button size="small" @click="goBackUserList" :disabled="searchInput == ''">
            返回用户封禁列表
          </el-button>
        </div>
          <el-row>
            <el-col>
              <!-- 选择升序降序排列 -->
              <el-cascader
                v-model="cascaderCheck"
                ref="align"
                placeholder="排列方式"
                size="small"
                style="width:100px"
                :options="options"
              ></el-cascader>
              <el-input v-model="searchInput" placeholder="请输入搜索内容" size="small" style="width:250px"></el-input>
              <el-button @click="searchUser" size="small" type="success" icon="el-icon-search"></el-button>
            </el-col>
          </el-row>
      </div>
      <!-- 表格主体 -->
      <el-table :data="tableData" height="500" stripe @selection-change="handleSelectionChange">
        <el-table-column type="selection" fixed width="50"></el-table-column>
        <el-table-column prop="userAccount" label="账号"></el-table-column>
        <el-table-column prop="userNickname" label="昵称"></el-table-column>
        <el-table-column prop="banReason" label="封禁原因"></el-table-column>
        <el-table-column prop="banTime" label="封禁时长"></el-table-column>
        <el-table-column prop="startTime" label="起始时间"></el-table-column>
        <el-table-column prop="endTime" label="结束时间"></el-table-column>
        <el-table-column label="操作" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="warning" @click="handleOpen(scope.row.userId)">解封</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <!-- <div class="block" style="margin:20px auto 0 auto"> -->
      <el-pagination
        class="pager"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageStart"
        :page-sizes="[10, 20, 30]"
        :page-size="pageSize"
        layout="sizes, prev, pager, next"
        :total="total">
      </el-pagination>
          <!-- </div> -->
         
  </div>
</template>

<script>
import {getCloseUserStart,searchCloseUser,handleSelectionChange} from '../../../api/commonReq/admin/user/data.js'
export default {
    name:"UserClose",
    data() {
        return {
        tableData: [],
        cascaderCheck:[],//清空级联选择器
        batchDeleteArr:[],
        searchInput:'',
        pageStart:1,//当前页
        pageSize:10,//一页显示的数量
        total:0,//全部数量
        options:[
          {
            value:'up',
            label:'升序排列'
          },
          {
            value:'down',
            label:'降序排列'
          }
        ]
      }
    },
    created(){
      this.getCloseUser()
    },
    methods:{
      //渲染被封禁的用户
      getCloseUser(){
        // this.$http({
        //   url:'/shops/admin/selectBanUser',
        //   method:'GET',
        //   params:{
        //     page:this.pageStart,
        //     size:this.pageSize
        //   },
        //   headers:{
        //     'Authorization': cookie.getToken() 
        //   }
        // }).then(data => {
        //   console.log(data);
        //   this.tableData = data.data.data.date
        //   this.total = data.data.data.total
        // }).catch(err => {
        //   console.log(err);
        // })
        getCloseUserStart({
          page:this.pageStart,
          size:this.pageSize
        }).then(data => {
          this.tableData = data.data.data.date
          this.total = data.data.data.total
        })
      },
      //改变一页显示的数量
      handleSizeChange(newSize){
        this.pageSize = newSize
        this.getCloseUser()
      },
      //改变当前页
      handleCurrentChange(newPage){
        this.pageStart = newPage
        this.getCloseUser()
      },
      //返回用户封禁列表
      goBackUserList(){
        this.getCloseUser()
        this.searchInput = ''
        this.cascaderCheck = ''
      },
      //模糊搜索
      searchUser(){
        let label = this.$refs['align'].getCheckedNodes()[0].pathLabels[0]
        if(this.searchInput === ''){
          this.$message({
              type: 'warning',
              message: '请输入搜索内容!'
            });
        }else{
          // this.$http({
          //   url:'/shops/admin/selectBanUser',
          //   methods:'GET',
          //   params:{
          //     des:label,
          //     information:this.searchInput
          //   },
          //   headers:{
          //     'Authorization':cookie.getToken()
          //   }
          // }).then(data => {
          //   console.log(data);
          //   this.tableData = data.data.data.date
          //   this.total = data.data.data.total
          //   // this.getCloseUser()
            
          // }).catch(err => {
          //   console.log(err);
          // })
          searchCloseUser({
              des:label,
              information:this.searchInput
          }).then(data=>{
              this.tableData = data.data.data.date
              this.total = data.data.data.total
          })
        }
      },
      //批量解禁
      handleSelectionChange(val){
        this.batchDeleteArr = val
      },
      batchOpen(){
        let openData = this.batchDeleteArr.map(item => {
          const {userId} = item
          console.log(userId);
          return(userId)
        })
        this.$confirm('还未到解禁时间,您将解禁这些用户, 请慎重考虑', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // this.$http({
          //     url:'/shops/admin/unBanUser',
          //     method:'DELETE',
          //     params:{
          //       userIds:openData
          //     },
          //     paramsSerializer: params => {
          //       return qs.stringify(params, { indices: false })  //直接传数组传不过去，这样传才会每一个id值都匹配在路径上
          //     },
          //     headers:{
          //       'Authorization':cookie.getToken()
          //     }
          //   }).then(data => {
          //     console.log(data);
          //     this.$message({
          //       type: 'success',
          //       message: '解禁成功'
          //     }); 
          //     this.getCloseUser()
          //   }).catch(err => {
          //     console.log(err);
          //   })
              handleSelectionChange({
                userIds:openData
              }).then(data=>{
                this.$message({
                type: 'success',
                message: '解禁成功'
                }); 
                this.getCloseUser()
              })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消解禁'
            }); 
          this.getUserList()         
        });
      },
      //解封
      handleOpen(userId){
        console.log(userId);
        this.$confirm('还未到解禁时间，您确定要解禁改用户吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url:'/shops/admin/unBanUser',
            method:'DELETE',
            params:{
              userIds:userId
            },
            headers:{
              'Authorization':cookie.getToken()
            }
          }).then(data => {
            console.log(data);
            this.$message({
              type: 'success',
              message: '解禁成功!'
            });
            this.getCloseUser()
          }).catch(err => {
            console.log(err);
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消解禁'
          });          
        });
      },
      

    }
}
</script>

<style>

</style>